<template>
  <div class="dashboard-container">
      <h1>用户信息的基本展示:</h1>
    <div class="dashboard-text">name: {{ name }}</div>
    <div class="dashboard-text">token: {{ token }}</div>
    <div class="dashboard-text">introduction: {{introduction}}</div>
    <div class="dashboard-text">age: {{age}}</div>
    <img :src="avatar" alt="图标" width="100px">
    <hr>
    <div>$attrs和$listeners</div>
    <A name="wf" age="20" height="166" hobby="chifan" @Aevent="Aevent">

    </A>

    <div class="linkStyle">全局css公共类的使用</div>
    <div class="flexBox" style="height: 200px;width: 200px;background-color:#1890ff;">
      <div>2</div>
      <div>{{arr}}</div>
    </div>

   <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="center">处理中心</el-menu-item>
      <el-submenu index="work">
        <template slot="title">我的工作台</template>
        <el-menu-item index="work1">选项1</el-menu-item>
        <el-menu-item index="work2">选项2</el-menu-item>
        <el-menu-item index="work3">选项3</el-menu-item>
        <el-submenu index="work4">
          <template slot="title">选项4</template>
          <el-menu-item index="/work41">选项1</el-menu-item>
          <el-menu-item index="/work42">选项2</el-menu-item>
          <el-menu-item index="/work43">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import A from "@/views/dashboard/components/A";
import B from "@/views/dashboard/components/B";

export default {
  name: 'Dashboard',
  created() {
    this.arr = [123,456]
    setTimeout(()=>{
      // this.arr.__proto__.push("123") // baocuo
    },1000)
  },
  components:{
    A,
    B
  },
  data(){
   return {
     arr:[],
     activeIndex: '1',
     activeIndex2: '1'
   }
  },
  computed: {
    ...mapGetters([
      'name',
      'token',
      'avatar',
      'introduction',
      'age'
    ])
  },
  methods:{
    handleSelect(key, keyPath) {
      // 多级路由可以用keypath 数组拼接 ['food','rice']
      // 或者key 直接绑定/food/rice
      console.log(key, keyPath);
    },
    Aevent(){
      console.log("你好")
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
